<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器(六)——元素选择器</title>
</head>
<body>
    <fieldset>
        <legend>jQuery元素选择器示例</legend>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <div>div1</div>
        <div id="test1">
            <span>div→span</span>
            <p>
                <span>
                    div→p→span
                </span>
            </p>
        </div>
        <span>aaaaaaa</span>
        <h1>GGGGGGG</h1>
        <div id="test2">
            <p>div3</p>
            <ul>
                <li>列表项一</li>
                <li>列表项二</li>
                <li>列表项三</li>
                <li id="sub_li" class="test">
                    <ul>
                        <li>子列表一</li>
                        <li>子列表二</li>
                    </ul>
                </li>
            </ul>
        </div>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
         *      //页面加载完成后的处理，固定写法
         * });
     *
     */
    $(function () {
        /***********************************jQuery根据标签名获取元素***************************************/
        //使用$("标签名")获取html元素标签，返回的是一个数组
        console.log("使用jQuery获取所有的p标签");
        var pArr = $("p");//获取所有的p标签，等同于原生js的document.getElementsByTagName("p")的这种写法
        console.log(pArr);
        console.log("使用jQuery获取所有的div标签");
        var divArr = $("div");//获取所有的div标签，等同于原生js的document.getElementsByTagName("div")的这种写法
        console.log(divArr);
        /***********************************jQuery根据标签名获取元素***************************************/

        /***********************************筛选元素******************************************************/
        console.log("使用jQuery获取第一个p标签");
        var p = $("p").eq(0);
        console.log(p);
        console.log("使用jQuery获取第一个li标签");
        var fist_li = $('li').first();    //获取第一个li元素
        console.log(fist_li);
        console.log("使用jQuery获取最后一个li标签");
        var last_li = $('li').last();     //获取最后一个li元素
        console.log(last_li);
        console.log("使用jQuery获取包含特定子元素的元素");
        var li = $('li').has('ul');//获取包含有ul的那个li，得到的是id为sub_li的那个li
        console.log(li);
        var result = $(li).hasClass("test");//判断li元素是否使用了test这个class,返回布尔值
        console.log(result);
        /***********************************筛选元素******************************************************/

        /***********************************查找元素******************************************************/
        console.log("div中的每个子元素,第一层");
        console.log($("div").children());      //div中的每个子元素,第一层

        console.log("div中的包含的所有span元素,子子孙孙");
        console.log($("div").find("span"));    //div中的包含的所有span元素,子子孙孙

        console.log("紧邻p元素后的一个同辈元素");
        console.log($("p").next());       　　　//紧邻p元素后的一个同辈元素

        console.log("p元素之后所有的同辈元素");
        console.log($("p").nextAll());        //p元素之后所有的同辈元素

        console.log("id为test1元素之后到id为test2之间所有的同辈元素,掐头去尾");
        console.log($("#test1").nextUntil("#test2"));    //id为"test1"元素之后到id为'test2'之间所有的同辈元素,掐头去尾

        console.log("紧邻p元素前的一个同辈元素");
        console.log($("p").prev());            //紧邻p元素前的一个同辈元素

        console.log("p元素之前所有的同辈元素");
        console.log($("p").prevAll());        //p元素之前所有的同辈元素

        console.log("id为test1元素之前到id为test2之间所有的同辈元素,掐头去尾");
        console.log($("#test1").prevUntil("#test2"));    //id为"test1"元素之前到id为'test2'之间所有的同辈元素,掐头去尾

        console.log("每个p元素的父元素");
        console.log($("p").parent());        //每个p元素的父元素

        console.log("每个p元素的所有祖先元素");
        console.log($("p").parents());         //每个p元素的所有祖先元素,body,html

        console.log("id为test1元素到id为test2之间所有的父级元素,掐头去尾");
        console.log($("#test1").parentsUntil("#test2"));   //id为"test1"元素到id为'test2'之间所有的父级元素,掐头去尾

        console.log("获取div的所有的同辈元素,不包括自己");
        console.log($("div").siblings());     //所有的同辈元素,不包括自己
        /***********************************查找元素******************************************************/
    });

    window.onload= function () {
        console.log("使用原生js获取所有的p标签");
        var pArr = document.getElementsByTagName("p");//获取所有的p标签
        console.log(pArr);
        console.log("使用原生js获取所有的div标签");
        var divArr = document.getElementsByTagName("div");
        console.log(divArr);

        console.log("使用原生js获取第一个p标签");
        var p = pArr[0];
        console.log(p);
    }
</script>
</html>